<template>
  <div class="el-detail-box">
    <div class="el-detail-head grid-content">
      <div class="el-detail-image el-fl">
        <img v-if="info.courseCoverPath" :src="get_img_src(info.courseCoverPath)" alt="info.courseName" />
        <img v-else src="@/assets/image/goods_default.png" :alt="info.courseName" />
      </div>
      <div class="el-detail-info el-fl">
        <el-row class="grid-content">
          <el-col :span="24" class="el-detail-title">{{ info.courseName }}</el-col>
          <el-col :span="24" class="el-info-item">
            <span>{{ info.courseGradeName }}</span>
            <span>{{ info.courseSubjectName }}</span>
            <span>{{ info.courseVersionName }}</span>
            <span>{{ info.courseVolumeName }}</span>
          </el-col>
          <el-col :span="24" class="el-detail-price">
            <span>&yen;{{ info.coursePrice }}</span>
          </el-col>
          <el-col :span="24">
            <!-- <el-input-number v-model="infoNum" controls-position="right" @change="handleChange" :min="1" :max="12"></el-input-number> -->
            <el-button type="danger" @click="buyNow(info)">立即购买</el-button>
            <el-button type="primary" @click="addToCart(info)">加入购物车</el-button>
          </el-col>
          <el-col :span="24" class="el-info-btn">
            <span>{{ purchaseCount }}人购买</span>
            <!-- <a href="javascript:;" @click="share()"><i class="el-icon-share"></i>分享</a>
            <a href="javascript:;" @click="collect()"><i class="el-icon-star-off"></i>收藏</a> -->
          </el-col>
        </el-row>
      </div>
      <div style="clear: both;"></div>
    </div>
    <div class="el-detail-ul">
      <div class="el-detail-li">
        <span>年级：</span>
        <span>{{ info.courseGradeName }}</span>
      </div>
      <div class="el-detail-li">
        <span>学科：</span>
        <span>{{ info.courseSubjectName }}</span>
      </div>
      <div class="el-detail-li">
        <span>版本：</span>
        <span>{{ info.courseVersionName }}</span>
      </div>
      <div class="el-detail-li">
        <span>册别：</span>
        <span>{{ info.courseVolumeName }}</span>
      </div>
      <div class="el-detail-li">
        <span>上传时间：</span>
        <span>{{ info.courseUploadTime }}</span>
      </div>
      <div style="clear: both;"></div>
    </div>
    <div class="el-detail-chapter"><CourseChapterDetail :options="treeOptions" /></div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped src="./index.scss"></style>
